// include_fields: top_comments,is_root,source_link,item,buyable,root_id,status,like_count,sender,album,reply_count
// filter_id: 植物多肉
// start: 24
// _: 1576460212229

// 加载数据渲染页面;

// xhr PC端  fetch 移动端  src jsonp  ......
// 服务器代理;
// 因为后端不是我们的没法使用最方便的cors跨域;

// ES6 + fetch ;   ES5 + xhr ;

// 1. 发起请求;
// 2. 渲染页面;

let next_start = 0;
async function loadJSON(start){
      // 1. 向url上拼接数据;
      let url = "http://localhost/dt";
      url += dataToUrl({
            include_fields: "top_comments,is_root,source_link,item,buyable,root_id,status,like_count,sender,album,reply_count",
            filter_id: "植物多肉",
            start: start,
            _: Date.now()
      });
      // 2.使用fetch发送请求;

      let response = await fetch(url);
      let res      = await response.json();
      // 3. 渲染页面....
      next_start = res.data.next_start;
      render(res);
      sort();
}


// 页面渲染 (字符串拼接):   
function render( res ){
      let list = res.data.object_list;
      let html = "";
      for(let i = 0 ; i < list.length ; i ++){
            html += ` <div class="item-box">
                              <div class="item-img-box">
                                    <img src="${list[i].photo.path}"  alt="" height=${parseInt(list[i].photo.height / ( list[i].photo.width / 235))}>
                              </div>
                              <div class="title">
                                    ${list[i].msg}
                              </div>
                        </div>`
      }
      document.querySelector(".waterfall-wrapper").innerHTML += html;
}
// 排序 : 
let global_min_height = null;
function sort(){
      let ele_list =  document.querySelector(".waterfall-wrapper").children;
      // console.log(ele_list);
      // 以第一排为基准;
      // 记录第一行每一列的高度
      let height_array = [];
      for(let i = 0 ; i < ele_list.length ; i ++){
            if( i < 4 ){
                  // 第一排的标准;
                  // 把元素当前的高度放入到高度数组之中进行记录;
                  height_array.push(ele_list[i].offsetHeight);
            }else{
                  // 其余的;
                  // 1. 找到数组之中的最小值;
                  // 2. 定位元素到最小值的位置;
                  //   left : 0 255 510 765  index * 255;
                  //   top  : 数组之中的最小值;

                  // 最小高度
                  // false =不关注this的改变，占位;
                  let min_height = Math.min.apply(false , height_array);
                  let min_index  = height_array.indexOf( min_height);

                  ele_list[i].style.position = "absolute";
                  // console.log(min_height, min_index);
                  ele_list[i].style.left = min_index * 255 + "px";
                  ele_list[i].style.top  = min_height + "px";

                  // 拼接之后将数组最小值加上我们刚刚拼接的元素的高度;
                  height_array[min_index] += ele_list[i].offsetHeight;
            }
      }
      global_min_height = Math.min.apply(false,height_array);
      // 把加载状态重置;
      isloading = false;
}


loadJSON(0);

// 转动到一定程度 => 逻辑  就加载数据 ; 
// 什么叫做一定程度; 
// 我什么时候加载数据  => 找到四列之中最矮的高度 => 自己求(高度数组); 
// 用户在卷动页面的时候 页面的scrollTop在改变;
// 页面显示的内容高度 ; => scrollTop + clientHeight;


let clientHeight = document.documentElement.clientHeight;
// 程序是否在加载之中;
let isloading = false;
window.onscroll = function(){
      // 如果页面渲染还未结束没有必要执行这个功能;
      if( global_min_height === null || isloading ){ return false };
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      // console.log(scrollTop + clientHeight - 60);
      // 1. 浏览器显示页面的最大高度;
      // 2. 图片长条之中的最小高度;
      // 跨函数使用变量 !;    
      // 为了让用户有更好的体验，所以我们进行提前的加载;
      if(scrollTop + clientHeight + 200 >= global_min_height){
            console.log("加载数据");
            isloading = true;
            loadJSON(next_start);
      }
}